<template>
    <div class="TipBlock" ref="TipBlock">
        <div class="closeBtn" @click="closeModule">
            <i class="icon njfont nj-shibai"></i>
        </div>
        <div class="logoAIntro">
            <img src="static/image/downloadLogo.png" class="DLLOGO"/>
            <div class="brief">
                <p style="color:#EFEFEF;">打开宁家鲜生商城购物</p>
                <p style="color:#727272;">宁家鲜生，美好生活！</p>
            </div>
        </div>
        <div class="downloadBtn" @click="openApp">
                点击打开
        </div>
        <div class="appMask" ref="weixinMask" v-if="isWeiXin" @click="openBrowser">
            <img v-if="showIos" src="../../../download/img/iOS.png" style="width:100%;height:100%;" alt="">
            <img v-if="showAndroid" src="../../../download/img/Android.png" style="width:100%;height:100%;" alt="">
        </div>
        <div class="appMask" style="z-index:999998" v-if="isShare" @click="openApp">

        </div>
    </div>
</template>

<script>
import { MessageBox } from '../../ui-components'

  export default {
    data () {
      return {
          showIos:false,
          showAndroid:false,
      }
    },
    components: {},
    props: {
        
    },
    computed:{
        isWeiXin(){
            let ua = window.navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                return true;
            }else{
                return false;
            }
        },
        isIOS9() {
            //获取固件版本
            let getOsv = function () {
                let reg = /OS ((\d+_?){2,3})\s/;
                if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) {
                    let osv = reg.exec(navigator.userAgent);
                    if (osv.length > 0) {
                        return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.');
                    }
                }
                return '';
            };
            let osv = getOsv();
            let osvArr = osv.split('.');
            //初始化显示ios9引导
            if (osvArr && osvArr.length > 0) {
                if (parseInt(osvArr[0]) >= 9) {
                    return true
                }
            }
            return false
        },
        isShare(){
            let share = this.$route.query.share;
            if(share){
                return true;
            }else{
                return false
            }
        }
    },
    methods:{
        toDownload() {
            location.href = location.href.split('H5')[0] + 'download/index.html';
            console.log(location.href.split('H5')[0] + 'download/index.html');
        },
        closeModule() {
            this.$refs.TipBlock.style.display = 'none';
        },
        openBrowser(){
            //提示打开浏览器
            // MessageBox.alert('请在浏览器中打开！')
            let u = navigator.userAgent;
            let isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            let isAndroid= u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            if(isIos){
                this.showIos = true;
                this.showAndroid = false;
            }else if(isAndroid){
                this.showIos = false;
                this.showAndroid = true;
            }
        },
        createIframe(){
            //添加iframe
            let iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            return iframe;
        },
        openApp(){
        	console.log('wushi')
            let oldUrl = location.href.split('H5')[0] + 'download/index.html';
            let localUrl="ningjiaxiansheng://ningjiaxiansheng.app.com";
            let openIframe=this.createIframe();
            let u = navigator.userAgent;
            let isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            let isAndroid= u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            let isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
            if(isIos){
                // if(this.isIOS9){
                //     //判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号
                //     window.location.href = localUrl;
                //     return;
                // }
                //判断是否是ios
                window.location.href = localUrl;
                let loadDateTime = Date.now();
                setTimeout(function () {
                    let timeOutDateTime = Date.now();
                    if (timeOutDateTime - loadDateTime < 2500) {
                        window.location.href = oldUrl;
                    }
                }, 2000);
            }else if(isAndroid){
                //判断是否是android
                if (isChrome) {
                    //chrome浏览器用iframe打不开得直接去打开，算一个坑
                    window.location.href = localUrl;
                } else {
                    //抛出你的scheme
                    openIframe.src = localUrl;
                }
                setTimeout(function () {
                    window.location.href =oldUrl;          
                }, 500);
            }else{
                //主要是给winphone的用户准备的,实际都没测过，现在winphone不好找啊
                openIframe.src = localUrl;
                setTimeout(function () {
                    window.location.href = oldUrl;
                }, 500);
            }
        }
    }
  }
</script>

<style>
    .TipBlock{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 2.5rem;
        background: #232323;
    }
    .DLLOGO{
        width:1.8rem;
        border-radius: .2rem;
    }
    .downloadBtn{
        width: 30%;
        height: 100%;
        background: #CD2525;
        text-align: center;
        line-height: 2.5rem;
        color: white;
    }
    .closeBtn{
        color: #AAAAAA;
        width: 10%;
        text-align: center;
    }
    .closeBtn i{
        width: 100%;
        font-size: .85rem;
    }
    .logoAIntro{
        width: 57%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .logoAIntro p{
        text-align: left;
        padding: 0;
        font-size: .65rem;
    }
    .brief{
        margin-left: .4rem;
    }
    .appMask{
        position: fixed;
        width: 100%;
        height:100%;
        /* opacity: 0.8; */
        top:0;
        z-index: 999999;
    }
</style>
